<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟窗口</title>
    <style>
        body {
            margin: 0;
            font-family: 'Cascadia Code','Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            overflow: hidden;
            display: flex; 
            justify-content: center;
            align-items: center;
            height: 100vh; 
        }

        .window {
            width: 784px; 
            height: 584px; 
            border: none; 
            box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* 更柔和的阴影 */
            display: flex;
            flex-direction: column;
            border-radius: 8px; 
            overflow: hidden;
        }

        .title-bar {
            -webkit-app-region: drag;
            background-color: #0b7cec; 
            padding: 10px 15px;
            font-weight: 600;
            cursor: default;
            border-bottom: 1px solid #dee2e6;
            user-select: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #f1f3f5;
        }

        .title-bar-text {
            flex-grow: 1;
            text-align: left; /* 标题靠左 */
            padding-left: 5px; /* 增加左边距 */
        }

        .window-controls button {
            background: none;
            border: none;
            padding: 5px 10px; /* 增加按钮内边距 */
            margin-left: 5px; /* 增加按钮间距 */
            cursor: pointer;
            -webkit-app-region: no-drag;
            border-radius: 4px; /* 按钮圆角 */
            font-size: 14px; /* 调整字体大小 */
            color: #495057; /* 按钮图标颜色 */
            line-height: 1; /* 确保图标垂直居中 */
        }
         .window-controls button:hover {
            background-color: #e9ecef; /* 悬停背景色 */
            color: #212529; /* 悬停图标颜色 */
         }
         /* 特别为关闭按钮添加悬停效果 */
         .window-controls button[title="关闭"]:hover {
             background-color: #e81123; /* 红色背景 */
             color: #fff; /* 白色图标 */
         }


        .content-area {
            flex-grow: 1;
            padding: 25px; /* 增加内容区内边距 */
            overflow-y: auto;
            color: #343a40; /* 内容文字颜色 */
            background-color: #ffffff; /* 确保内容区背景为白色 */
        }

    </style>
</head>
<body>
    <div class="window">
        <div class="title-bar">
            <span class="title-bar-text">可拖动区域演示</span>
             <div class="window-controls">
                <button title="最小化">—</button> <!-- 使用 Em dash 更美观 -->
                <button title="最大化">□</button> <!-- 使用方块符号 -->
                <button title="关闭">✕</button> <!-- 使用乘号符号 -->
            </div>
        </div>
        <div class="content-area">
            <p>上方标题栏可拖动移动，双击可窗口最大化/还原</p>
            <p>实现方法：</p>
            <p>1.火山程序中调用 Edge浏览框1.启用非客户区域支持 (真)</p>
            <p>2.网页端将目标可拖动元素区域添加CSS属性“-webkit-app-region:drag”</p>
            <p style="height: 300px; background-color: #f8f9fa; border: 1px dashed #dee2e6; display: flex ; margin-top: 20px;">
                <br>
                .title-bar { <br>
                    -webkit-app-region: drag;<br>
                }<br>
            </p>
        </div>
    </div>

    <script>
        document.querySelectorAll('.window-controls button').forEach(button => {
            button.addEventListener('click', (e) => {
                // 处理按钮点击事件
                chrome.webview.postMessage(e.target.title)
            });
        });
        function setWindowSize(width, height) {
            const windowElement = document.querySelector('.window');
            windowElement.style.width = width + 'px';
            windowElement.style.height = height + 'px';
        }
    </script>
</body>
</html>
